// 订单详情页面 点击订单进来的
<template>
  <section ref="print">
    <!-- 打印内容开始 -->
    <div class="orderDetails">
      <ul class="title">
        <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump(key)">
          {{item.name}}
          <i v-show="item.num">({{item.num}})</i>
        </li>
      </ul>

      <div class="myUI">
        <ul>
          <li>
            <small>
              <em>
                <b>订单编号 :</b>
                {{ myorderinfo.order_no}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>订单日期 :</b>
                {{myorderinfo.create_at}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>收货地址 :</b>
                {{receipt_address.province_name}}
                {{receipt_address.city_name}}
                {{receipt_address.district_name}}
                {{receipt_address.address}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>收货人 :</b>
                {{receipt_address.consignee}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>电话号码 :</b>
                {{receipt_address.phone}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>运费 :</b>
                ￥{{myorderinfo.freight_price}}
              </em>
            </small>
          </li>

          <li>
            <small>
              <em>
                <b>总计 :</b>
                <i>￥</i>
              </em>
            </small>
            <h2>{{myorderinfo.goods_price}}</h2>
          </li>
        </ul>
        <h3>商品信息：</h3>
        <ol class="title">
          <li>商品名称</li>
          <li>单价(￥)</li>
          <li>数量</li>
          <li>物流信息</li>
          <li>订单状态</li>
          <li>操作</li>
        </ol>
        <div class="contentDetails" v-if="express.length">
          <dl v-for="(item,index) in express" :key="index">
            <dd>
              <ul>
                <li v-for="(ele,index) in item.goods" :key="index">
                  <img :src="ele.goods_logo" />
                  <h5>{{ele.goods_title}}</h5>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li v-for="(ele,index) in item.goods" :key="index">{{ele.selling_price}}</li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li v-for="(ele,index) in item.goods" :key="index">{{ele.goods_num}}</li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>
                  <template>
                    <!-- <ul v-if="[1,2,3].includes(item.status)"> -->
                    <ul v-if="true">
                      <li>
                        物流公司：
                        <em style="font-weight:bold">{{ item.company_title }}</em>
                      </li>

                      <el-dropdown
                        trigger="hover"
                        @visible-change="logistics($event, item.express_no, item.shipper_code)"
                      >
                        <span class="el-dropdown-link">
                          <li style="cursor: pointer;">
                            物流单号：
                            <em>{{item.express_no}}</em>
                          </li>
                        </span>

                        <el-dropdown-menu slot="dropdown" v-loading="loading">
                          <el-dropdown-item>
                            <h4 style="color:#f40;">快递公司：{{Logistics.ShipperCode}}</h4>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="Logistics.Reason">
                            <h4>{{Logistics.Reason}}</h4>
                          </el-dropdown-item>
                          <template v-else>
                            <el-dropdown-item v-for="(item,index) in Logistics.Traces" :key="index">
                              <h5>
                                <i class="iconfont" style="font-size:11px; color:#f40;">&#xe612;</i>
                                {{item.AcceptStation}}
                                <small
                                  style="color:#ccc;"
                                >{{item.AcceptTime}}</small>
                              </h5>
                            </el-dropdown-item>
                          </template>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </ul>
                    <div v-else style="color:#ddd; font-size:20px; letter-spacing: 1.5px;">暂无物流信息...</div>
                  </template>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>
                  <strong v-if="item.status == 0">待发货</strong>
                  <strong v-else-if="item.status == 1">已发货</strong>
                  <strong v-else-if="item.status == 2">已收货</strong>
                  <strong v-else-if="item.status == 3">已完成</strong>
                  <strong v-else-if="item.status == 4">申请退款/退货</strong>
                  <strong v-else-if="item.status == 5">已退货及退款</strong>
                  <strong v-else-if="item.status == 6">退款/退货驳回</strong>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>
                  <el-button
                    v-if="item.status == 1"
                    style="margin-bottom:10px"
                    size="mini"
                    @click="ConfirmReceipt(item.express_no,myorderinfo.order_no,item.goods_list_id)"
                  >确认收货</el-button>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
        <div class="contentDetails" v-else>
          <dl v-for="(item,index) in order_goods" :key="index">
            <dd>
              <ul>
                <li>
                  <img :src="item.goods_logo" />
                  <h5>{{item.goods_title}}</h5>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>{{item.selling_price}}</li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>{{item.number}}</li>
              </ul>
            </dd>

            <dd>
              <ul>
                <li>
                  <template>
                    <!-- <ul v-if="[1,2,3].includes(item.status)"> -->
                    <ul v-if="true">
                      <li>
                        <em style="font-weight:bold">暂无物流信息</em>
                      </li>
                    </ul>
                  </template>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>
                  <strong v-if="item.status == 0">待发货</strong>
                </li>
              </ul>
            </dd>
            <dd>
              <ul>
                <li>
                  <em>无法操作</em>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
      </div>
      <div class="print">
        <el-button size="mini" type="primary" @click="print">打印订单</el-button>
      </div>
    </div>
    <!-- 打印内容结束 -->
    <!-- <div class="no-print">不要打印我</div> -->
  </section>
</template>
<script>
export default {
  name: "orderDetails",

  data() {
    return {
      title: [
        {
          name: "订单详情",
          id: 0
        }
      ],
      myorderinfo: {}, // 订单信息 上面的
      receipt_address: {}, // 收货地址的信息
      express: [], // 循环的数据保存
      order_goods: [], // 沒有物流时候显示的数据
      loading: false,
      postData: {}, // 订单详情
      Logistics: {} // 物流快递
    };
  },

  methods: {
    // 打印
    print() {
      this.$print(this.$refs.print);
    },
    // 快递确认收货
    async ConfirmReceipt(express_no, order_no, goods_list_id) {
      console.log(express_no, order_no);
      // goods_list_id	是	string	订单商品号
      // order_no	是	string	订单编号
      // express_no	是	string	快递编号
      try {
        let res = await this.$http({
          method: "post",
          url: "/api/index/web/confirmReceipt",
          data: {
            express_no,
            order_no,
            goods_list_id
          }
        });
        console.log(res);
        if (res.data.State.Code == 200) {
          this.getdata();
          this.$notify({
            title: "成功",
            message: "收货成功...",
            type: "success"
          });
        }
      } catch (error) {
        console.log(error);
      }
    },

    // 获取列表数据
    async getdata() {
      let orderNo = this.$store.state.OrderDetailsOrderNo;
      try {
        let res = await this.$http({
          method: "post",
          url: "/api/index/api/getOrder",
          data: {
            order_no: orderNo
          }
        });

        if (res.data.State.Code == 200) {
          // this.postData = res.data.data
          this.myorderinfo = res.data.data.order;
          this.receipt_address = res.data.data.receipt_address;
          this.express = res.data.data.express;
          this.order_goods = res.data.data.order_goods;
        }
      } catch (error) {
        console.log(error);
      }
    },

    // 物流 获取物流数据
    async logistics(event, i, v) {
      console.log(event, i, v);
      if (event) {
        this.loading = true;
        let shipper_code = v; //快递编码
        let logistic_code = i; //快递单号
        console.log(shipper_code, logistic_code);
        try {
          let res = await this.$http({
            method: "post",
            url: "/api/index/api/searchTracking",
            data: {
              shipper_code,
              logistic_code
            }
          });
          console.log(res);
          if (res.data.Success) {
            this.Logistics = res.data;
            this.loading = false;
          }
        } catch (error) {
          console.log(error);
        }
      }
    },

    // 上面的导航的切换 一个是暂时的
    changesjump(key) {
      this.index = key;
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>
<style lang="scss" scoped>
.orderDetails {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;

  .myUI {
    width: 96%;
    margin: auto;
    color: #333;
    ul {
      li {
        small {
          em {
            color: rgb(97, 97, 97);
            b {
              color: #333;
              display: inline-block;
              width: 58px;
              text-align-last: justify;
              margin-right: 3px;
            }
          }
        }
      }
    }
    h3 {
      margin-bottom: 10px;
      font-size: 15px;
    }
    .title {
      display: flex;
      width: 100%;
      font-weight: bold;
      border-top: rgba(204, 204, 204, 0.219) solid 1px;
      li {
        text-align: center;
        color: #3386e6da;
        font-size: 15px;
        padding: 0;
        margin: 0;
        &:nth-of-type(1) {
          width: 330px;
        }
        &:nth-of-type(2) {
          width: 80px;
        }
        &:nth-of-type(3) {
          width: 80px;
        }
        &:nth-of-type(4) {
          width: 224px;
        }
        &:nth-of-type(5) {
          width: 118px;
        }
        &:nth-of-type(6) {
          width: 98px;
        }
      }
    }

    .contentDetails {
      border-bottom: 1px solid rgba(204, 204, 204, 0.185);

      dl {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid rgba(204, 204, 204, 0.192);
        dd {
          &:nth-of-type(1) {
            width: 330px;
            ul {
              li {
                height: 76px;
                display: flex;
                align-items: center;
                img {
                  width: 70px;
                  height: 70px;
                  padding: 3px 10px;
                }
                h5 {
                  width: 240px;
                  // overflow: hidden;
                  // white-space: nowrap;
                  // text-overflow: ellipsis;
                }
              }
            }
          }
          &:nth-of-type(2) {
            width: 80px;
            text-align: center;
            ul {
              li {
                height: 76px;
                line-height: 76px;
                color: #f40;
              }
            }
          }
          &:nth-of-type(3) {
            width: 80px;
            text-align: center;
            ul {
              li {
                height: 76px;
                line-height: 76px;
              }
            }
          }
          &:nth-of-type(4) {
            width: 224px;
            text-align: center;
          }
          &:nth-of-type(5) {
            width: 118px;
            text-align: center;
            color: #f40;
          }
          &:nth-of-type(6) {
            width: 98px;
            text-align: center;
          }
        }
      }
    }

    /deep/ .el-table {
      .el-table__header {
        .has-gutter {
          tr {
            th {
              font-weight: bold;
              text-align: center;
              letter-spacing: 0.5px;
              color: #3386e6da;
              font-size: 15px;
            }
          }
        }
      }
      .el-table__body-wrapper {
        .el-table__row {
          td {
            .cell {
              text-align: center;
              em {
                color: #f40;
              }
              strong {
                color: #f40;
              }
              .goodsimagename {
                display: flex;
                flex-direction: row;
                align-items: center;
                text-align: left;
                img {
                  width: 68px;
                  height: 68px;
                  margin-right: 10px;
                }
                h4 {
                  width: 245px;
                }
              }
            }
          }
        }
      }
    }

    ul {
      margin: 20px 0px;
      li {
        h2 {
          display: inline;
          color: #f40;
          font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
            "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        }
        i {
          color: #f40;
          font-weight: bold;
        }
      }
    }
  }
  .print {
    margin-top: 50px;
    display: flex;
    justify-content: flex-end;
  }

  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .content {
    width: 930px;
    margin: auto;
    border: 1px solid #e3e3e3;
    margin-top: 15px;
    ol {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 20px 15px;
      li {
        padding: 0px 30px;
        &:nth-child(1) {
          width: 220px;
          border-right: #e3e3e3 1px solid;
          // background: rebeccapurple;
        }
        &:nth-child(2) {
          width: 296px;
          border-right: #e3e3e3 1px solid;
          // background: forestgreen
        }
        &:nth-child(3) {
          width: 200px;
          // background: gold;
        }
        h4 {
          line-height: 40px;
          bdi {
            color: #ff9000;
          }
        }
        p {
          color: #707070;
          font-size: 12px;
        }
      }
    }
  }
  .Inventory {
    width: 930px;
    margin: auto;
    // border: 1px solid #e3e3e3;
    margin-top: 15px;
    h4 {
      margin-top: 8px;
      line-height: 48px;
    }
    .tuwen {
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        &:last-child {
          font-size: 12px;
          color: #707070;
        }
      }
      img {
        width: 74px;
        height: 74px;
        padding: 10px;
        padding-right: 20px;
      }
    }
  }
  .detailed {
    li {
      text-align: right;
      padding-right: 30px;
      line-height: 33px;
      &:nth-child(1) {
        margin-top: 10px;
      }
      i {
        display: inline-block;
        width: 120px;
      }
    }
  }
  .addPrice {
    text-align: right;
    padding-right: 30px;
    margin-top: 10px;
    line-height: 44px;
    background: #e3e3e3;
    font-size: 14px;
    font-weight: normal;
    span {
      display: inline-block;
      width: 120px;
      color: #ff0000;
      font-size: 19px;
      font-weight: bold;
    }
  }
}
/deep/ .el-dropdown-menu {
  .el-dropdown-menu__item {
    h5 {
      small {
        color: #ccc;
      }
      i {
        font-weight: normal;
      }
    }
    &:last-of-type {
      color: #f40;
      h5 {
        small {
          color: #f40;
        }
        i {
          font-weight: bold;
        }
      }
    }
  }
}
</style>
